<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>取消项目（新）</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
    }
    
    body {
      background-color: #f0f2f5;
      color: #333;
    }
    
    .page-container {
      position: relative;
      width: 100%;
      min-height: 100vh;
      background-color: #fff;
    }
    
    /* 头部标题 */
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 56px;
      padding: 0 20px;
      background-color: #fff;
      border-bottom: 1px solid #e8e8e8;
    }
    
    .header h1 {
      font-size: 18px;
      font-weight: 500;
    }
    
    .header-actions {
      display: flex;
      align-items: center;
    }
    
    .btn-header {
      padding: 5px;
      margin-left: 10px;
      background: none;
      border: none;
      cursor: pointer;
      font-size: 16px;
    }
    
    /* 主内容区 */
    .main-content {
      display: flex;
      min-height: calc(100vh - 56px);
    }
    
    /* 流程时间线 */
    .workflow-timeline {
      width: 25%;
      padding: 20px;
      border-right: 1px solid #e8e8e8;
    }
    
    .timeline-title {
      font-size: 16px;
      font-weight: 500;
      margin-bottom: 20px;
    }
    
    .timeline {
      position: relative;
    }
    
    .timeline::before {
      content: '';
      position: absolute;
      left: 12px;
      top: 16px;
      height: calc(100% - 30px);
      width: 1px;
      background-color: #e8e8e8;
    }
    
    .timeline-item {
      position: relative;
      padding-left: 30px;
      padding-bottom: 30px;
    }
    
    .timeline-dot {
      position: absolute;
      left: 6px;
      top: 0;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background-color: #52c41a;
      border: 2px solid #fff;
      z-index: 1;
    }
    
    .timeline-dot.start {
      background-color: #1890ff;
    }
    
    .timeline-dot.end {
      background-color: #1890ff;
    }
    
    .timeline-content {
      border-radius: 4px;
      background-color: #fff;
    }
    
    .timeline-title-text {
      font-weight: 500;
      margin-bottom: 4px;
    }
    
    .timeline-info {
      font-size: 12px;
      color: #666;
      line-height: 1.6;
    }
    
    .timeline-result {
      margin-top: 6px;
      color: #52c41a;
    }
    
    /* 右侧内容区 */
    .content-panel {
      width: 75%;
      padding: 0;
    }
    
    /* 选项卡 */
    .tabs {
      display: flex;
      border-bottom: 1px solid #e8e8e8;
    }
    
    .tab-item {
      padding: 12px 20px;
      cursor: pointer;
      color: #666;
      font-size: 14px;
    }
    
    .tab-item.active {
      color: #1890ff;
      border-bottom: 2px solid #1890ff;
    }
    
    .tab-item:first-child {
      color: #1890ff;
      text-decoration: underline;
    }
    
    /* 表单内容 */
    .form-content {
      padding: 20px;
    }
    
    .form-group {
      margin-bottom: 16px;
    }
    
    .form-label {
      display: block;
      margin-bottom: 8px;
      font-weight: 400;
    }
    
    .form-control {
      width: 100%;
      padding: 8px 12px;
      border: 1px solid #d9d9d9;
      border-radius: 2px;
      font-size: 14px;
      line-height: 1.5;
    }
    
    .form-select {
      width: 100%;
      padding: 8px 12px;
      border: 1px solid #d9d9d9;
      border-radius: 2px;
      font-size: 14px;
      line-height: 1.5;
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 6'%3E%3Cpath fill='%23666' d='M6 6L0 0h12z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 12px center;
      background-size: 10px;
    }
    
    .form-textarea {
      width: 100%;
      padding: 8px 12px;
      border: 1px solid #d9d9d9;
      border-radius: 2px;
      font-size: 14px;
      line-height: 1.5;
      min-height: 80px;
      resize: vertical;
    }
    
    .form-link {
      color: #1890ff;
      text-decoration: none;
      cursor: pointer;
    }
    
    .form-control-static {
      padding: 8px 0;
      line-height: 1.5;
      display: block;
    }
    
    .change-reason-link {
      color: #1890ff;
      text-decoration: none;
      margin-left: 5px;
    }
    
    .form-footer {
      margin-top: 24px;
      text-align: right;
    }
    
    .btn {
      padding: 8px 16px;
      font-size: 14px;
      border-radius: 2px;
      cursor: pointer;
    }
    
    .btn-primary {
      color: #fff;
      background-color: #1890ff;
      border: 1px solid #1890ff;
    }
    
    .attachments {
      padding: 20px 0;
    }
    
    .no-attachment {
      color: #999;
      font-size: 14px;
    }
    
    /* 底部标记 */
    .footer-mark {
      position: absolute;
      left: 16px;
      bottom: 16px;
      display: flex;
      align-items: center;
      font-size: 12px;
      color: #ff4d4f;
    }
    
    .mark-dot {
      width: 16px;
      height: 16px;
      margin-right: 4px;
      border-radius: 50%;
      background-color: #ff4d4f;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 12px;
      font-weight: bold;
    }
    
    /* 表单布局 */
    .form-row {
      display: flex;
      margin: 0 -8px;
    }
    
    .form-col {
      padding: 0 8px;
      flex: 1;
    }
    
  </style>
</head>
<body>
  <div class="page-container">
    <!-- 头部标题 -->
    <div class="header">
      <h1>取消项目（新）</h1>
      <div class="header-actions">
        <button class="btn-header">&#x26F6;</button>
        <button class="btn-header">&#x2715;</button>
      </div>
    </div>
    
    <!-- 主内容区 -->
    <div class="main-content">
      <!-- 流程时间线 -->
      <div class="workflow-timeline">
        <h2 class="timeline-title">审批进程</h2>
        <div class="timeline">
          <!-- 开始节点 -->
          <div class="timeline-item">
            <div class="timeline-dot start"></div>
            <div class="timeline-content">
              <h3 class="timeline-title-text">开始</h3>
            </div>
          </div>
          
          <!-- 发起流程 -->
          <div class="timeline-item">
            <div class="timeline-dot"></div>
            <div class="timeline-content">
              <h3 class="timeline-title-text">发起流程</h3>
              <div class="timeline-info">
                <div>谢汶沁/80231866</div>
                <div>处理时间：2025-03-31 15:55:06</div>
                <div class="timeline-result">【已处理】处理结果：同意</div>
              </div>
            </div>
          </div>
          
          <!-- 室经理审批 -->
          <div class="timeline-item">
            <div class="timeline-dot"></div>
            <div class="timeline-content">
              <h3 class="timeline-title-text">室经理审批</h3>
              <div class="timeline-info">
                <div>谢汶沁/80231866</div>
                <div>处理时间：2025-03-31 15:55:38</div>
                <div class="timeline-result">【同意】处理结果：同意</div>
              </div>
            </div>
          </div>
          
          <!-- 开发团队主管与项目管理员审批 -->
          <div class="timeline-item">
            <div class="timeline-dot"></div>
            <div class="timeline-content">
              <h3 class="timeline-title-text">开发团队主管与项目管理员审批</h3>
              <div class="timeline-info">
                <div>杨洋/80273863</div>
                <div>处理时间：2025-03-31 15:56:23</div>
                <div class="timeline-result">【同意】处理结果：同意</div>
              </div>
            </div>
          </div>
          
          <!-- 结束节点 -->
          <div class="timeline-item">
            <div class="timeline-dot end"></div>
            <div class="timeline-content">
              <h3 class="timeline-title-text">结束</h3>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 右侧内容区 -->
      <div class="content-panel">
        <!-- 选项卡 -->
        <div class="tabs">
          <div class="tab-item">查看完整流程图</div>
          <div class="tab-item active">基本信息</div>
        </div>
        
        <!-- 表单内容 -->
        <div class="form-content">
          <h3 class="form-section-title">审批意见</h3>
          <div class="form-group">
            <input type="text" class="form-control" value="同意" />
          </div>
          
          <div class="form-row">
            <div class="form-col">
              <div class="form-group">
                <label class="form-label">项目编号</label>
                <span class="form-control-static">T25AC311</span>
              </div>
            </div>
            <div class="form-col">
              <div class="form-group">
                <label class="form-label">项目名称</label>
                <span class="form-control-static">一些特性B</span>
              </div>
            </div>
          </div>
          
          <div class="form-row">
            <div class="form-col">
              <div class="form-group">
                <label class="form-label">变更分类</label>
                <select class="form-select">
                  <option>技术原因</option>
                  <option>业务原因</option>
                  <option>管理原因</option>
                </select>
              </div>
            </div>
            <div class="form-col">
              <div class="form-group">
                <label class="form-label">变更原因</label>
                <span class="form-control-static">
                  <a href="#" class="change-reason-link">变更分类及变更原因</a>
                </span>
              </div>
            </div>
          </div>
          
          <div class="form-group">
            <label class="form-label">技术外联单位影响</label>
            <select class="form-select">
              <option></option>
              <option>有</option>
              <option>无</option>
            </select>
          </div>
          
          <div class="form-group">
            <label class="form-label">取消原因说明</label>
            <textarea class="form-textarea">12</textarea>
          </div>
          
          <div class="form-group">
            <label class="form-label">附件</label>
            <div class="attachments">
              <div class="no-attachment">暂无附件</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 底部标记 -->
    <div class="footer-mark">
      <div class="mark-dot">!</div>
      <div>记录相关处理人</div>
    </div>
  </div>
</body>
</html>
